<template>
	<view class="follow">
		<u-sticky>
			<view class="tabs" style="background-color: #fff">
				<u-tabs :list="tab_list" @click="clickTabs" :current="tab_idx"></u-tabs>
			</view>
			<view class="header_type" v-if="listData.length > 0">
				<view class="btn_li">
					<u-button text="切换模板" size="mini" @click="changeType"></u-button>
				</view>
			</view>
		</u-sticky>
		<block v-if="listData.length > 0">
			<view class="follow_list" v-for="(item, index) in listData" :key="index" @tap.stop="showClick(index)">
				<view class="follow_list_title">
					<view class="l">{{ item.nickname }}（{{ item.mobile }}）</view>
					<view class="r">
						<view class="logo">
							<u--image src="/static/icon/work.png" width="50rpx" height="50rpx"></u--image>
						</view>
						<view class="icon">
							<u-icon name="arrow-up" size="18" v-if="!item.show"></u-icon>
							<u-icon name="arrow-down" size="18" v-else></u-icon>
						</view>
					</view>
				</view>
				<view class="follow_list_desc" v-if="!item.show">
					<text class="u-line-1 desc">
						【
						<text v-if="item.is_notice === 0" style="color: #f0ad4e">待发</text>
						<text v-else style="color: green">已发</text>
						】{{ item.template_content }}
					</text>
				</view>
				<view class="follow_list_content" v-else>
					<text class="content">
						【
						<text v-if="item.is_notice === 0">待发</text>
						<text v-else>已发</text>
						】{{ item.content }}
					</text>
					<view class="bottom">
						<view class="date grey_color size28">
							<text v-if="item.is_notice === 1">已发时间:{{ $u.timeFormat(item.send_time * 1000, 'yyyy年mm月dd日 hh时MM分ss秒') }}</text>
						</view>
						<view class="btn">
							<view class="btn_li send_success" @tap.stop="sendText(item, index)" v-if="item.is_click && !item.is_notice">已发送</view>
							<view class="btn_li" @tap.stop="copyText(item, index)">复制内容</view>
						</view>
					</view>
				</view>
			</view>
		</block>
		<block v-else>
			<view class="all_empty">
				<u-empty mode="list" text="暂时没有任何计划"></u-empty>
			</view>
		</block>
		<u-picker :show="showType" :columns="columnsType" keyName="title" @cancel="showType = false" @confirm="confirmType"></u-picker>
		<u-loadmore v-if="listData.length >= queryForm.limit" :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText" :nomore-text="nomoreText" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			queryForm: {
				limit: 10,
				page: 1,
				type: 1
			},
			listData: [],
			status: 'loadmore',
			loadingText: '努力加载中',
			loadmoreText: '轻轻上拉',
			nomoreText: '实在没有了',
			tab_list: [
				// {
				// 	name: '全部',
				// 	type: 0
				// },
				{
					name: '生日',
					type: 1
				},
				{
					name: '三日回访',
					type: 2
				},
				{
					name: '三月回访',
					type: 3
				},
				{
					name: '三年回访',
					type: 4
				},
				{
					name: '结婚纪念日',
					type: 5
				}
			],
			tab_idx: 0,
			showType: false,
			columnsType: []
		};
	},
	onLoad() {
		this.$initConfig().then(() => {
			this.getInfo();
		});
	},
	onPullDownRefresh() {
		this.queryForm.page = 1;
		this.getInfo();
	},
	onReachBottom() {
		if (this.status != 'nomore') {
			this.queryForm.page++;
			this.getInfo();
		}
	},
	methods: {
		confirmType({ indexs, value, values }) {
			let _this = this;
			_this
				.$http('plan/changePlanByTemplate', {
					type: _this.queryForm.type,
					id: value[0]['id']
				})
				.then((res) => {
					if (res.code) {
						_this.$u.toast('切换成功');
						_this.showType = false;
						_this.getInfo();
					}
				});
		},
		changeType() {
			let _this = this;
			_this
				.$http('message_template/getMessageTemplateByTypeList', {
					type: _this.queryForm.type
				})
				.then((res) => {
					if (res.code) {
						_this.showType = true;
						_this.columnsType = [res.data];
					}
				});
		},
		sendText(item, index) {
			let _this = this;
			this.listData[index]['is_notice'] = 1;
			_this
				.$http('plan/setSendPlan', {
					id: item.id
				})
				.then((res) => {
					if (res.code) {
						_this.$u.toast('设置成功');
					}
				});
		},
		clickTabs(e) {
			this.tab_idx = e.index;
			this.queryForm.type = e.type;
			this.getInfo();
		},
		copyText(item, index) {
			let _this = this;
			uni.showLoading({
				title: '请稍后',
				mask: true
			});
			_this
				.$http('plan/setPlanByCopy', {
					id: item.id
				})
				.then((res) => {
					if (res.code) {
						_this.listData[index]['is_click'] = 1;
						uni.hideLoading();
						uni.setClipboardData({
							data: item.content,
							success: function () {
								uni.$u.toast('复制成功！即将打开聊天框');
								setTimeout(() => {
									wx.qy.openEnterpriseChat({
										groupName: '', //1表示该userid是企业成员，2表示该userid是外部联系人
										externalUserIds: item.user_external, //可以是企业成员，也可以是外部联系人
										success: function (res) {
											// 回调
											console.log('打开成功', res);
										},
										fail(err) {
											console.log('----', err);
											uni.$u.toast('自动打开失败');
										}
									});
								}, 600);
							}
						});
					}
				});
		},
		showClick(index) {
			let item = this.listData[index];
			if (!item.show) {
				this.listData[index]['show'] = true;
			} else {
				this.listData[index]['show'] = false;
			}
			console.log(this.listData);
		},
		getInfo(is_add = false) {
			let _this = this;
			this.status = 'loading';
			_this
				.$http('plan/getPlanByList', {
					..._this.queryForm
				})
				.then((res) => {
					setTimeout(() => {
						uni.stopPullDownRefresh();
					}, 800);
					if (res.code) {
						if (is_add) {
							this.listData = this.listData.concat(res.data.data);
						} else {
							_this.listData = res.data.data;
						}
						if (_this.listData.length >= res.data.total) {
							this.status = 'nomore';
						} else {
							_this.status = 'loadmore';
						}
					}
				});
		}
	}
};
</script>

<style lang="scss">
.follow_list {
	border-bottom: 1rpx solid #f4f4f4;
	padding-bottom: 24rpx;
	background: #fff;
	padding: 24rpx;
	transition: all 0.2s ease-out;
}
.follow_list_title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 80rpx;
	line-height: 80rpx;
	.l {
		flex: 1;
	}
	.r {
		display: flex;
		align-items: center;
		.icon {
			margin-left: 10rpx;
		}
	}
}
.follow_list_desc {
	.desc {
		font-size: 24rpx;
		color: $common-grey-color;
		margin-top: 20rpx;
	}
}
.follow_list_content {
	color: #333;
	.bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
		.date {
		}
		.btn {
			display: flex;
			.btn_li {
				font-size: 24rpx;
				background: $common-color-primary;
				padding: 5rpx 10rpx;
				border-radius: 10rpx;
				color: #fff;
			}
		}
	}
}
.send_success {
	margin-right: 20rpx;
	background-color: $uni-color-warning !important;
}
.header_type {
	background: #fff;
	display: flex;
	justify-content: flex-end;
	padding: 0 24rpx;
	.btn_li {
		padding: 20rpx 0;
		width: 150rpx;
	}
}
</style>
